<template>
  <div>
    <header>
      <div>
        <div class="title">
          <span style="border-left: 5px solid #21a6e6;">&nbsp;&nbsp;</span>
          <i class="el-icon-s-home"></i>
          预约
        </div>

        <span class="query">
          <query-header :queryParam="queryParam" @handleQuery="refresh" />
        </span>

      </div>
      
    </header>

    <section class="content-show">
      <!-- loading -->
      <div class="loading" v-loading="loading"></div>

      <!-- empty show -->
      <div id="empty" v-if="empty">
        <el-empty description="这里没有可预约的检测时间段" class="empty-img"></el-empty>
      </div>

      <!-- normal show -->
      <div class="list">
        <li v-for="item in limits" :key="item.alid">
          <quota-item :item="item"></quota-item>
        </li>
      </div>
    </section>

  </div>
</template>

<script>
import QuotaItem from '../../../components/appointments/QuotaItem.vue';
import QueryHeader from '../../../components/appointments/QueryHeader.vue';
export default {
  components: { QuotaItem, QueryHeader },
  data() {
    return {
      search: "",
      queryParam: {
        // date: "2022-05-20",
        date: null,
        hospitalId: null,
        pageSize: null,
        pageIndex: null,
      }
    };
  },
  computed: {
    userPhone: function() {
      return this.$store.state.user.userPhone;
    },
    limits: function() {
      return this.$store.state.appointment.allAppointments;
    },
    empty: function() {
      return this.limits==null || this.limits.length == 0
    },
    hospitals: function() {
      return this.$store.state.appointment.hospitals;
    },
    loading: function() {
      return this.$store.state.appointment.allAppointments == null;
    }
  },
  methods: {
    doaddAppointment: function(limitId) {
      this.$confirm("确认预约？")
        .then(() => {
          this.$store.dispatch("appointment/make_appointment", limitId);
        })
        .catch(() => {
        });
    },
    refresh: function() {
      console.log("all appointment", this.queryParam);
      this.$store.dispatch("appointment/refresh_all_appointment", this.queryParam);
      this.$store.dispatch("appointment/refresh_history");
    },
  },
  created() {
    console.log("用户" + this.$store.state.user.userPhone + "访问了预约页面");
    if (this.limits == null) {
      this.refresh();
    }
  },
};
</script>

<style lang="scss" scoped>
.list{
  li {
      list-style-type: none;
      margin-top: 20px;
    }
}

header {
  background: white;
  border-bottom: 1px solid #DCDFE6;
  width: calc(100% - 60px);
  height: 50px;
  margin: 0px 30px;
  position: relative;
  z-index: 50;
  border-left: none;
  .title {
    float: left;
    font-weight: bold;
    font-size: 22px;
    line-height: 50px;
    margin-left: 5px;
    width: calc(30% - 5px);
  }

  .query {
    float: right;
    width: 60%;
  }
}

#empty {
  height: calc(100% - 50px);

  .empty-img {
    width: 50%;
    margin: auto;
  }
  
}
</style>


